<template>
  <view class="" style="width: 100%">
    <!-- 竖版 -->
    <view class="way1" v-if="way == 0">
      <view class="au_progress_bar">
        <view class="progress_btn" @click="playAudio" v-if="isBtn">
          <image :src="pauseImg" v-show="playFlag" mode=""> </image>
          <image v-show="!playFlag" :src="playImg" mode=""></image>
        </view>
        <!-- <view class="progress_bar">
					<view class="progress_bar_action" :style="{
						width: `${progressBarLeft}%`,
					}">
					</view>
					<view class="progress_bar_dian" :style="{
						left: `${progressBarLeft}%`,
					}">
						<audio style="text-align: left" :src="src" @timeupdate="timeupdate" id="au"></audio>
					</view>
				</view> -->
        <u-slider
          v-model="progressBarLeft"
          class="progress_bar1"
          activeColor="#55b877"
          inactiveColor="#c0c4cc"
          @change="changing"
        >
          <!-- <audio :ref="'audioRefs'+src" style="text-align: left" :src="src"   :currentTime="currentTime" ></audio> -->
        </u-slider>

        <view class="del_btn" v-if="showDelBtn" @click.stop="deleteFn">
          <u-icon name="close" :color="color" size="16"></u-icon>
        </view>
      </view>
      <view class="progress_num" :style="{ color: color }">
        <view>
          {{ currentDuration }}
        </view>
        <view>
          {{ totalDuration }}
        </view>
      </view>
    </view>
    <!-- 横板 -->
    <view class="way2" v-if="way == 1">
      <view class="au_progress_bar au_progress_bar2">
        <view class="progress_btn" @click="playAudio" v-if="isBtn">
          <image :src="pauseImg" v-show="playFlag" mode=""> </image>
          <image v-show="!playFlag" :src="playImg" mode=""></image>
        </view>
        <view class="left_time" :style="{ color: color }">{{
          currentDuration
        }}</view>
        <view class="progress_bar progress_bar2">
          <view
            class="progress_bar_action"
            :style="{
              width: `${progressBarLeft}%`,
            }"
          >
          </view>
          <view
            class="progress_bar_dian"
            :style="{
              left: `${progressBarLeft}%`,
            }"
          >
            <audio
              style="text-align: left"
              :src="src"
              @timeupdate="timeupdate"
              id="au"
            ></audio>
          </view>
        </view>
        <view class="right_time" :style="{ color: color }">{{
          totalDuration
        }}</view>
        <view class="del_btn" v-if="showDelBtn" @click.stop="deleteFn">
          <!-- <image src="@/static/images/my/icon_sczp_shanchu.png" mode="" class="del_btn"
						@click.stop="deleteFn"></image> -->
          <u-icon name="close" :color="color" size="16"></u-icon>
        </view>
      </view>
      <!-- <view class="progress_num">
        <view>
          {{ currentDuration }}
        </view>
        <view>
          {{ totalDuration }}
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
import storage from "@/common/storage"; // 缓存封装
export default {
  props: {
    playImg: {
      type: String,
      default: "../../static/images/icon_wddc_yinpin_bofang.png",
    },
    pauseImg: {
      type: String,
      default: "../../static/images/icon_wddc_yinpin_zhanting.png",
    },
    src: {
      type: String,
      default:
        "https://huaxuxingqiu.demo.benfusite.com/uploads/10001/20231109/54fa42cae7c5ed18a382b2141ab13c47.mp3",
    },
    // 0竖版 1横版
    way: {
      type: Number,
      default: 0,
    },
    color: {
      type: String,
      default: "#eeeeee",
    },
    isBtn: {
      type: Boolean,
      default: true,
    },
    showDelBtn: {
      type: Boolean,
      default: false,
    },
    isBofang: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      audio: null,
      audioTime: null,
      // src: "https://huaxuxingqiu.demo.benfusite.com/uploads/10001/20231109/54fa42cae7c5ed18a382b2141ab13c47.mp3",
      playFlag: false, // 是否播放过
      zanting: false, // 是否暂停
      isEnd: false, // 播放结束
      duration: 0,
      times: 0,
      progressBarLeft: 0,
      totalDuration: 0,
      currentDuration: "00:00",
      currentTime: 0,
    };
  },
  watch: {
    //haveTask 为接收参数的名称
    isBofang: {
      handler(newValue, oldValue) {
        console.log("值变化了", this.audio);
        
		if(this.audio){
			// this.audio.pause();
			if(newValue == false){
				this.audio.pause()
				this.playFlag = false;
          		this.zanting = true;
			}
		}
      },
      deep: true, // 深度监听父组件传过来对象变化
    },
  },
  methods: {
    circulation() {
      console.log("已经监听到数据变化");
    },
  },
  mounted() {
    // this.audio = uni.createInnerAudioContext();
    // this.audio.autoplay = true;
    this.getFileInfo();
  },
  methods: {
    changing(value) {
      // console.log(value)
      let time = (this.audio.duration / 100) * value;
      // console.log(time,'时间')
      // this.audio.currentTime = time
      this.audio.seek(time);
      // console.log(this.audio.currentTime,'当前播放进度')
    },

    timeupdate() {
      console.log("触发");
    },
    getFileInfo() {
      this.audioTime = uni.createInnerAudioContext();
      // this.audio.autoplay = true;
      this.audioTime.src = this.src;
      this.audioTime.onCanplay(() => {
        var time = this.audioTime.duration.toFixed(0);
        var min = Math.floor(time / 60);
        var second = time % 60;
        this.duration = second;
        this.times = time;
        this.totalDuration = `${min < 10 ? `0${min}` : min}:${
          second < 10 ? `0${second}` : second
        }`;
      });
    },
    playAudio() {
        this.$emit("changeBofangZhungtai");
        let allAudioContext = storage.get("audioContext"); // 音频实例

        this.isEnd = false;
        if (!this.playFlag && !this.zanting) {
          this.audio = uni.createInnerAudioContext();
          this.audio.sessionCatAegory = "soloAmbient";
        }

        let Audio = this.audio;
        Audio.src = this.src; //音频地址

        let that = this;
        if (this.playFlag) {
          //当前正在播放，切换效果，暂停播放
          this.playFlag = false;
          this.zanting = true;
          Audio.pause();
          Audio.offTimeUpdate();
          storage.set("audioContext", Audio);
          that.$emit("change", false);
          return;
        }

        this.playFlag = true;

        Audio.onTimeUpdate((res) => {
          // console.log("rrrrrrrr", this.audio.currentTime);
          if (this.isEnd) {
            Audio.onTimeUpdate = null;
            Audio.destroy();
            return;
          }

          let progressBarLeft = (this.audio.currentTime / this.times) * 100;
          this.progressBarLeft = progressBarLeft > 100 ? 100 : progressBarLeft;
          var min = Math.floor(this.audio.currentTime / 60);
          var second = Math.floor(this.audio.currentTime % 60);
          this.currentDuration = `${min < 10 ? `0${min}` : min}:${
            second < 10 ? `0${second}` : second
          }`;
          // console.log(this.currentDuration,min+'秒',second+'分','当前时间')
        });
        // Audio.pause();
        Audio.play(); //执行播放
        console.log("看看谁先执行");

        storage.set("audioContext", Audio);
        Audio.onError((res) => {
          console.log(res, "播放错误了errerrerrerrerrerrerrerrerrerrerrerr");
          that.playFlag = false;
          Audio.pause();
          uni.showToast({
            title: res.errCode + "," + res.errMsg,
            icon: "none",
          });
        });
        Audio.onPause(function () {
          // console.log("pause");
          that.playFlag = false;
          that.$emit("change", false);
        });
        Audio.onEnded(function () {
          console.log("end", that.times);
          Audio.pause();
          that.isEnd = true;
          // Audio.destroy()
          that.playFlag = false;
          setTimeout(() => {
            that.progressBarLeft = 0;
            that.currentDuration = "00:00";
          }, 1000);

          that.$emit("change", false);
        });
        that.$emit("change", true);
    },
    bigFly3() {
      let Audio = this.audio;
      Audio.stop();
    },
    // 删除
    deleteFn() {
      this.$emit("deleteAudio");
    },
  },
};
</script>

<style scoped lang="scss">
.au_progress_bar {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 32rpx;

  .progress_btn {
    width: 34rpx;
    height: 34rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
  .progress_bar1 {
    flex: 1;
  }
  .progress_bar {
    // width: 572rpx;
    flex: 1;
    height: 8rpx;
    background: #d8d8d8;
    border-radius: 4rpx;
    margin-left: 25rpx;
    position: relative;

    .progress_bar_action {
      height: 8rpx;
      background: #55b877;
      border-radius: 4rpx;
    }

    .progress_bar_dian {
      width: 30rpx;
      height: 30rpx;
      background: #55b877;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: -10rpx;
    }
  }

  .progress_bar2 {
    margin-left: 10rpx;
  }
}

.au_progress_bar2 {
  margin-top: 0;
}

.progress_num {
  width: 100%;
  padding-left: 60rpx;
  box-sizing: border-box;
  font-size: 24rpx;
  font-weight: 500;
  color: #444444;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left_time {
  font-size: 24rpx;
  color: #eeeeee;
  margin-left: 29rpx;
}

.right_time {
  font-size: 24rpx;
  color: #eeeeee;
  margin-left: 29rpx;
}

.del_btn {
  width: 32rpx;
  height: 32rpx;
  padding-left: 12rpx;
  display: flex;
  align-items: center;
}
</style>